<template>
    <router-link :to="`/store/${store.storeId}`" class="store-card">
        <img class="store-image" :src="store.logo || getRandomDefaultImage()" :alt="store.name">
        <div class="store-content">
            <div class="store-header">
                <div class="store-name">{{ store.name }}</div>
                <div class="store-rating">
                    <i class="fas fa-star"></i>
                    <span class="store-rating-score">{{ store.rating.toFixed(1) }}</span>
                </div>
            </div>
            <div class="store-info">{{ store.address }}</div>
            <div class="store-tags">
                <span class="store-tag" v-for="tag in store.tags" :key="tag.tagId">{{ tag.name }}</span>
            </div>
            <div class="store-distance">
                <span>距离 {{ formatDistance(store.distance) }}</span>
                <span :class="['store-hours', { closed: !isStoreOpen(store.business_hours) }]">
                    {{ isStoreOpen(store.business_hours) ? '营业中' : '已关闭' }}
                </span>
            </div>
        </div>
    </router-link>
</template>

<script>
import { formatDistance, isStoreOpen } from '@/utils/helpers.js';

export default {
    name: 'StoreCard',
    props: {
        store: {
            type: Object,
            required: true
        }
    },
    setup() {
        const getRandomDefaultImage = () => {
            const imageNumber = Math.floor(Math.random() * 4) + 1;
            return `/image/store_cover/${imageNumber}.png`;
        };

        return {
            getRandomDefaultImage,
            formatDistance,
            isStoreOpen
        };
    }
}
</script>

<style scoped>
.store-card {
    display: flex;
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
}

.store-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 15px;
}

.store-content {
    flex: 1;
}

.store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.store-name {
    font-weight: bold;
    font-size: 16px;
    color: #2d3748;
}

.store-rating {
    display: flex;
    align-items: center;
    color: #f6ad55;
    font-size: 14px;
}

.store-rating-score {
    margin-left: 5px;
    color: #4a5568;
}

.store-info {
    font-size: 12px;
    color: #718096;
    margin-bottom: 5px;
}

.store-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.store-tag {
    display: inline-block;
    padding: 2px 8px;
    background-color: #f7fafc;
    border-radius: 10px;
    font-size: 12px;
    color: #4a5568;
    margin-right: 5px;
    margin-bottom: 5px;
}

.store-distance {
    font-size: 12px;
    color: #a0aec0;
    display: flex;
    justify-content: space-between;
}

.store-hours {
    color: #38a169;
}

.store-hours.closed {
    color: #e53e3e;
}
</style> 